<template>
  <el-scrollbar height="100vh">
    <div class="container">
      <el-affix :offset="1">
        <h1 class="title">矢量图 JSON</h1>
      </el-affix>
      <div id="map" class="map-x" ref="map"></div>
      <div class="codestyle"><Code /></div>
      <dl>
        <p>说明：</p>
        <dt>GeoJSON是一种用于编码各种地理数据结构的数据。GeoJSON对象可以表示几何、特征或特征集合。GeoJSON支持以下几何类型：点（Point）、线（LineString）、面（Polygon）、多点（MultiPoint）、多线（MultiLineString）、多面（MultiPolygon）和几何集合（GeometryCollection）。</dt>
        <dt>GeoJSON中的功能包含几何对象和其他属性，特征集合表示一系列特性。</dt>
      </dl>
    </div>
  </el-scrollbar>
</template>
<script>
import { onMounted, ref } from 'vue-demi'
import Code from './code.vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import SourceVector from 'ol/source/Vector'
import LayerVector from 'ol/layer/Vector'
import GeoJSON from 'ol/format/GeoJSON'
// import CN from '@/geo/MapOfChina.json'
import QH from '@/geo/QHHP.json'
export default {
  setup () {
    const map = ref(null)
    const source = new SourceVector({
      features: new GeoJSON().readFeatures(QH, {
        dataProjection: 'EPSG:4326',
        featureProjection: 'EPSG:4326',
        extractGeometryName: true
      })
    })
    const view = new View({
      projection: 'EPSG:4326',
      center: [98.860775, 35.521945], // 青海
      zoom: 6
    })

    const init = () => {
      map.value = new Map({
        target: map.value,
        layers: [
          new LayerVector({
            source: source
          })
        ],
        view: view
      })
    }

    onMounted(() => {
      init()
    })
    return {
      map,
      source,
      view
    }
  },
  components: {
    Code
  }
}
</script>
<style lang="scss" scoped>
@import '../../css/main.scss';
</style>
